<#assign base=request.contextPath />


<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${base}/img/asset-favicon.ico">
    <title>在线教育网</title>

    <link rel="stylesheet" href="${base}/plugins/normalize-css/normalize.css"/>
    <link rel="stylesheet" href="${base}/css/page-learing-list.css"/>
    <link rel="stylesheet" href="${base}/plugins/normalize-css/normalize.css"/>
    <link rel="stylesheet" href="${base}/plugins/bootstrap/dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="${base}/css/page-learing-index.css"/>
    <link rel="stylesheet" href="${base}/css/loading.css"/>

</head>

<body>
<!-- 页面头部 -->
<!--头部导航-->
    <#include "header.ftl" />

<div id="app">
    <div class="learing-list">
        <div class="list-box">
        <#--条件筛选-->
            <ul>
                <li>方向：</li>
                <li class="btn" :class="{active: groupActive==0}" @click="clickGroup(0)">全部</li>
                <ol>
                    <li class="btn" v-for="(group,index) in groups" v-text="group.name" :key="group.id"
                        :class="{active: groupActive==group.id}" @click="clickGroup(group.id)"></li>
                </ol>
            <#--<a href="#" class="more">更多 ∨</a>-->
            </ul>
            <ul>
                <li>分类：</li>
                <li class="btn" :class="{active: classifyActive==0}" @click="clickClassify(0)">全部</li>
                <ol>
                    <li class="btn" v-for="(classify,index) in classics" v-text="classify.name" :key="classify.id"
                        :class="{active: classifyActive==classify.id}" @click="clickClassify(classify.id)"></li>
                </ol>
            </ul>
            <ul class="nav nav-tabs ">
                <li>难度：</li>
                <li class="btn" :class="{active: levelActive==0}" @click="clickLevel(0)">全部</li>
                <ol>
                    <li class="btn" :class="{active: levelActive==1}" @click="clickLevel(1)">初级</li>
                    <li class="btn" :class="{active: levelActive==2}" @click="clickLevel(2)">中级</li>
                    <li class="btn" :class="{active: levelActive==3}" @click="clickLevel(3)">高级</li>
                </ol>
            </ul>
        </div>
    </div>

    <div class="container">
        <div class="row">
        <#--课程列表-->
            <div class="col-md-9 list-row-left">
                <div class="list-cont-left">
                <#--排序方式-->
                    <div class="tit">
                        <ul class="nav nav-tabs ">
                            <li><a href="javascript:void(0)" :class="{active: orderByActive==0}"
                                   @click="clickOrderBy(0)">推荐</a></li>
                            <li><a href="javascript:void(0)" :class="{active: orderByActive==1}"
                                   @click="clickOrderBy(1)">最新</a></li>
                            <li><a href="javascript:void(0)" :class="{active: orderByActive==2}"
                                   @click="clickOrderBy(2)">热评</a></li>
                            <div class="page navbar-right">
                                <a href="#" class="prev"></a>
                            </div>
                        </ul>
                    </div>
                <#--排序方式/-->
                    <div class="tab-content">
                        <div class="loading" v-if="loading==0">
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                        <div v-if="loading==1" class="content-list">
                        <!--查询结果-->
                            <div class="recom-item" v-for="(item,index) in items" :key="item.id"
                                 @click="click(item.id)">
                                <a href="javascript:void(0)">
                                    <p>
                                        <img :src="item.picture" width="100%" alt="">
                                        <span class="lab" v-if="index<5">HOT</span>
                                    </p>
                                    <ul>
                                        <li v-text="item.name"></li>
                                        <li>
                                            <span v-if="item.level==1">初级</span>
                                            <span v-if="item.level==2">中级</span>
                                            <span v-if="item.level==3">高级</span>
                                            <em> · </em>
                                            <i v-text="item.hits"></i>人在学习
                                        </li>
                                    </ul>
                                </a>
                            </div>

                        </div>
                        <div v-if="loading==2">目前还没有符合条件的课程</div>
                    </div>
                </div>
            </div>
        <#--课程列表/-->

        <#--精品TOP榜and猜你喜欢-->
            <div class="col-md-3 list-row-rit">
                <div class="list-cont-right">
                    <div class="right-box">
                        <div class="tit">精品TOP榜</div>
                        <div class="contList">
                            <div class="contList-item">
                                <div class="box hov">
                                    <div class="info">
                                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </div>
                                    <div class="infoImg">
                                        <div><img src="${base}/img/widget-topBg.png" width="100%" height="110" alt="">
                                        </div>
                                        <div class="desc">
                                            通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="contList-item">
                                <div class="box">
                                    <div class="info">
                                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </div>
                                    <div class="infoImg">
                                        <div><img src="${base}/img/widget-topBg.png" width="100%" height="110" alt="">
                                        </div>
                                        <div class="desc">
                                            通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="contList-item">
                                <div class="box">
                                    <div class="info">
                                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </div>
                                    <div class="infoImg">
                                        <div><img src="${base}/img/widget-topBg.png" width="100%" height="110" alt="">
                                        </div>
                                        <div class="desc">
                                            通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="contList-item">
                                <div class="box">
                                    <div class="info">
                                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </div>
                                    <div class="infoImg">
                                        <div><img src="${base}/img/widget-topBg.png" width="100%" height="110" alt="">
                                        </div>
                                        <div class="desc">
                                            通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="contList-item">
                                <div class="box">
                                    <div class="info">
                                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </div>
                                    <div class="infoImg">
                                        <div><img src="${base}/img/widget-topBg.png" width="100%" height="110" alt="">
                                        </div>
                                        <div class="desc">
                                            通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="contList-item">
                                <div class="box">
                                    <div class="info">
                                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </div>
                                    <div class="infoImg">
                                        <div><img src="${base}/img/widget-topBg.png" width="100%" height="110" alt="">
                                        </div>
                                        <div class="desc">
                                            通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="tit">猜你喜欢</div>
                        <div class="contList">
                            <div class="contList-item">
                                <div class="box hov">
                                    <div class="info">
                                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </div>
                                    <div class="infoImg">
                                        <div><img src="${base}/img/widget-btnbg.png" width="100%" height="110" alt="">
                                        </div>
                                        <div class="desc">
                                            通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="contList-item">
                                <div class="box">
                                    <div class="info">
                                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </div>
                                    <div class="infoImg">
                                        <div><img src="${base}/img/widget-btnbg.png" width="100%" height="110" alt="">
                                        </div>
                                        <div class="desc">
                                            通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="contList-item">
                                <div class="box">
                                    <div class="info">
                                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </div>
                                    <div class="infoImg">
                                        <div><img src="${base}/img/widget-btnbg.png" width="100%" height="110" alt="">
                                        </div>
                                        <div class="desc">
                                            通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="contList-item">
                                <div class="box">
                                    <div class="info">
                                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </div>
                                    <div class="infoImg">
                                        <div><img src="${base}/img/widget-btnbg.png" width="100%" height="110" alt="">
                                        </div>
                                        <div class="desc">
                                            通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="contList-item">
                                <div class="box">
                                    <div class="info">
                                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </div>
                                    <div class="infoImg">
                                        <div><img src="${base}/img/widget-btnbg.png" width="100%" height="110" alt="">
                                        </div>
                                        <div class="desc">
                                            通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="contList-item">
                                <div class="box">
                                    <div class="info">
                                        <p>Think PHP 5.0 博客系统实战项目演练</p>
                                        <li><span>高级</span> <em> · </em> 1125人在学习</li>
                                    </div>
                                    <div class="infoImg">
                                        <div><img src="${base}/img/widget-btnbg.png" width="100%" height="110" alt="">
                                        </div>
                                        <div class="desc">
                                            通过对ThinkPHP框架基础，带领大家由浅入深轻松掌握ThinkPHP的理论基础，更加全面的掌握ThinkPHP框架运行机制……
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        <#--精品TOP榜and猜你喜欢/-->
        </div>
    </div>
</div>

<!-- 页面底部 -->
<!--底部版权-->
<#include 'footer.ftl'>

<!-- 页面 css js -->


<script type="text/javascript" src="${base}/plugins/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="${base}/plugins/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="${base}/js/vuejs-2.5.16.js"></script>
<script src="${base}/js/axios-0.18.0.js"></script>
<script id="testScript" type="text/javascript" src="${base}/js/list.js" base="${base}"></script>
<script>
    $('#${page}').addClass('active');
</script>

</body>